<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    
      <link href="fonts/mui-icons-extra.ttf" rel="stylesheet"/>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/new_file.css?2.0" rel="stylesheet"/>

    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
	   	var auths=null;
		document.getElementById("loginByWX").addEventListener('tap', function() {
		plus.oauth.getServices( function(services){
			auths = services;
			
			for(var k in auths){
				console.log(auths[k].id)
			}
			//auths解释0QQ 1微信 2微博 3小米，但是不建议使用auths[1]类似的写法，因为各个设备排序不一样，比较坑爹
			//注意获取使用unionid，此id通用后期的微信端等它会用户共享，（openid完全唯一）
			//var s = auths[1];
			var s;
			for (var i = 0; i < auths.length; i++){
			//用这样的写法指定第三方，参照：
			//[LOG] : xiaomi
			//[LOG] : qq
			//[LOG] : sinaweibo
			//[LOG] : weixin
	 
				if (auths[i].id == 'weixin'){
				 s = auths[i];
				 break; 
				}
			}
			
			if(!s.authResult){
				s.login(function(e){
					// 获取登录操作结果
					s.getUserInfo( function(e){
						console.log( "获取用户信息成功："+JSON.stringify(s.userInfo) );
						mui.toast('登录成功');
					}, function(e){
						console.log( "获取用户信息失败："+e.message+" - "+e.code );
						mui.toast('获取用户信息失败');
					} );
					
				}, function(e){
					mui.toast('登录认证失败');
				});
			}else{
				//已经登录认证
				mui.toast('登录成功');
			}
	 
		}, function(e){
			console.log( "获取登录失败："+e.message+" - "+e.code );
			mui.toast('登录认证失败');
		});
	});
   		});
   		
    </script>
    
</head>
<style>
	.mui-contenta{
		position: absolute;
		width: 100%;
		min-height: 100%;
		background: url(images/yuantiao.jpg) no-repeat center;
		background-size: cover;
            -webkit-filter: blur(7px);
            -moz-filter: blur(7px);
            -o-filter: blur(7px);
            -ms-filter: blur(7px);
             filter: blur(7px);
             z-index: -1;
             top: 0;
             left: 0;
		
}
.mui-p-tex a{ color:#000000}
.top {
				margin-top: 20px;
				text-align: center;
			}
			.top span{}
			/*.sinaweibo {
				position: relative;
				width: 30px;
				height: 30px;
				background: url(images/icon-sina.png);
				background-size: 100%;  
			}*/
			.weixin {
				width: 30px;       
				height: 30px; 
				background: url(images/icon-weixin.png);  
				background-size: 100%; 
			}
			.qq {
				width: 30px;
				height: 30px;
				background: url(images/icon-qq.png); 
				background-size: 100%; 
			}
			.mui-text-color{ color: #000000;}
</style>
<body>
	
<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">欢迎登录</h1>
</header>-->
		<div class="mui-content">
			<div class="mui-logo">
				<img src="images/logo.png">
			</div>
			<div class="mui-logo-text">
				<p>测试一下测试一下</p>
				<p>测试一下</p>
			</div>
			<div id="input_example" class="mui-input-group mui-input-bg">
			    <div class="mui-input-row mui-bottom">
			        <label><span class="mui-icon mui-icon-personadd"></span></label>
			        <input id="username" type="text" class="mui-input-clear" placeholder="请输入您的手机号或学号">
			    </div>
			    <div class="mui-input-row mui-input-bg">
			        <label><span class="mui-icon mui-icon-locked"></span></label>
			        <input id="password" type="password" class="mui-input-clear mui-input-password" placeholder="请输入密码">
			    </div>
			    
			 </div>
			 <p class="mui-top overflow mui-p-text"><span><a>访客</a></span><span><a>忘记密码</a></span></p>
			<div class="mui-button-row" style="margin-top:10px">
			       <button type="button" data-loading-text="登录中" class="mui-btn mui-btn-primary" style="width:90%;height: 40px;">登   录</button>
			        <!--<button type="button" class="mui-btn mui-btn-danger" >取消</button>-->
			</div>
			
            <div class="top" id="testLogin">
                <span class="mui-icon weixin" id="loginByWX"></span> 
                <span class="mui-icon qq" id="qq"></span> 
                <!--<span class="mui-icon sinaweibo" id="sinaweibo"></span>-->
            </div>
	        <p class="mui-text-center mui-text-color">使用第三方登录</p>
			
			
		</div>
		<div  class="mui-contenta"></div>
	<script src="js/mui.min.js"></script>
	<script>
		
	</script>
</body>
</html>